<template>
  <div class="model-table">
    <div class="model-table-title">参数配置</div>
    <div class="model-table-row model-table-row-header">
      <div class="model-table-row-cell">
        点击表格输入参数名<br />示例：产品名称
      </div>
      <div class="model-table-row-cell">
        点击表格输入参数值<br />
        示例：灭火器
      </div>
      <div class="model-table-row-cell">
        是否上传标识解析<br />
        <div
          style="
            color: red;
            font-size: 10px;
            line-height: 12px;
            word-break: break-all;
            font-weight: 500;
          "
        >
          至少需要设置一个参数上传标识解析平台，上传后该参数值将不允许修改
        </div>
      </div>
    </div>
    <el-popover
      v-for="(item, index) in value4"
      placement="right"
      :width="200"
      trigger="hover"
    >
      <template #reference>
        <div class="model-table-row model-table-row-body">
          <div class="model-table-row-cell">
            <el-input
              v-model="item.name"
              class="model-table-row-cell-input"
              placeholder="请输入参数名"
              clearable
              size="small"
            />
          </div>
          <div class="model-table-row-cell">
            <el-input
              v-model="item.value"
              class="model-table-row-cell-input"
              placeholder="请输入参数值"
              clearable
              size="small"
            />
          </div>
          <div class="model-table-row-cell">
            <el-switch v-model="item.isUpload" />
          </div>
        </div>
      </template>
      <div class="model-table-row-pop">
        <Top @click="upItem(index)"  v-if="index !== 0"  class="model-table-row-pop-icon"></Top>
        <Bottom @click="downItem(index)" v-if="index !== value4.length - 1" class="model-table-row-pop-icon"></Bottom>
        <Plus @click="addItem(index)" class="model-table-row-pop-icon"></Plus>
        <DeleteFilled @click="deleteItem(index)" v-if="value4.length != 1" class="model-table-row-pop-icon"></DeleteFilled>
      </div>
    </el-popover>
  </div>
</template>
<script setup>
import { ref } from "vue";
import "@/utils/style/modelStyle.scss";
const value4 = defineModel("value4");
const addItem = (index) => {
  value4.value.splice(index + 1, 0, {
    name: "",
    value: "",
    isUpload: false,
  });
};
const deleteItem = (index) => {
  value4.value.splice(index, 1);
};
const upItem = (index) => {
  const temp = value4.value[index];
  value4.value[index] = value4.value[index - 1];
  value4.value[index - 1] = temp;
};
const downItem = (index) => {
  const temp = value4.value[index];
  value4.value[index] = value4.value[index + 1];
  value4.value[index + 1] = temp;
};
</script>
<style lang="scss"></style>
